<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <style>
        .th {
            background-color: #eeeeee;
        }

        .mask {
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, .3);
            position: absolute;
            top: 0;
            left: 0;
        }

        .confirm {
            width: 300px;
            height: 200px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container" style="margin: 50px auto;">
            <div class="form-group">
                <input type="text" class="form-control" v-model="bookname" @keydown.enter="setbook"
                    placeholder="输入图书名称">
            </div>
            <table class="table table-striped">
                <thead>
                    <tr class="th">
                        <th>id</th>
                        <th>书名</th>
                        <th>添加时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in mybooks">
                        <td>{{item.id}}</td>
                        <td>{{item.bookname}}</td>
                        <td>{{item.addTime}}</td>
                        <td><button class="btn btn-danger" @click="fn(index)">删除</button></td>
                    </tr>
                    <tr v-show="mybooks.length == 0">
                        <td colspan="4">暂无数据</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="mask" @click.self="isShow = false" v-show="isShow">
            <div class="confirm">
                <button @click=" fn1" class="btn">确定</button>
                <button @click="isShow = false" class="btn btn-danger">取消</button>
            </div>
        </div>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                bookname: '',
                // mybooks:[
                //     // {
                //     //     id:Math.random(),
                //     //     bookname:'aa',
                //     //     addTime:new Date().toLocaleDateString()
                //     // }
                // ]
                mybooks: JSON.parse(localStorage.getItem('mybooks')) ? JSON.parse(localStorage.getItem('mybooks')):[],
                isShow: false,
                index:''
            },
            methods: {
                setbook() {
                    if(this.bookname.trim() == ''){
                        alert('请输入书名');
                        return
                    }
                    let obj = {
                        id: Math.random(),
                        bookname: this.bookname,
                        addTime: new Date().toLocaleDateString()
                    }

                    this.mybooks.push(obj)
                    localStorage.setItem('mybooks', JSON.stringify(this.mybooks))
                    this.bookname = ''

                },
                removebook(index) {
                    
                    this.mybooks.splice(index, 1)
                    localStorage.setItem('mybooks', JSON.stringify(this.mybooks))

                },
                fn(index) {
                    this.isShow = true
                    this.index =index
                },
                fn1(){
                    this.removebook(this.index)
                    this.isShow = false
                }
            },
        })
    </script>
</body>

</html>